<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <div class="fixed-head">
      <div class="container">
        <div class="fl"></div>
        <div class="fr">
          <div class="user-info" v-if="loginData.login">{{loginData.userName}}</div>
          <div class="notice-tip" v-if="loginData.login">
            <router-link to="/main/notice"><i class="iconfont icon-bell"></i>3</router-link>
          </div>
          <div class="logout-btn" v-if="loginData.login" v-on:click="logout()">{{$t('topMenu.logout')}}</div>
          <el-dropdown @command="changeLocale">
            <span class="el-dropdown-link">
              <i class="iconfont icon-duoyuyan"></i><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh-CN">简体中文 <i class="iconfont icon-dagou" v-show="$i18n.locale=='zh-CN'"></i></el-dropdown-item>
              <el-dropdown-item command="zh-TW">繁体中文 <i class="iconfont icon-dagou" v-show="$i18n.locale=='zh-TW'"></i></el-dropdown-item>
              <el-dropdown-item command="en-US">English <i class="iconfont icon-dagou" v-show="$i18n.locale=='en-US'"></i></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <router-view class="router-view"></router-view>
    <div class="footer">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <ul class="clear-fix">
              <li>{{$t('footer.careers')}}</li>
              <li>{{$t('footer.terms_of_use')}}</li>
              <li>{{$t('footer.privacy_policy')}}</li>
              <li>{{$t('footer.faq')}}</li>
              <li>{{$t('footer.transparency_report')}}</li>
              <li>{{$t('footer.contact_us')}}</li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import './assets/iconfont/iconfont.css'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
    }
  },
  methods: {
    ...mapActions(['updateloginDataAction']),
    changeLocale (locale) {
      this.$i18n.locale = locale
      this.$cookies.set('locale', locale)
    },
    logout () {
      this.updateloginDataAction({login: false})
      this.$message({
        message: this.$t('tip.logout_success'),
        type: 'success'
      })
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState({
      fullscreenLoading: state => state.fullscreenLoading,
      loginData: state => state.loginData
    })
  }
}
</script>

<style lang="less">
  @import './assets/css/common.less';

  .fixed-head{
    .user-info{
      float: left;
      margin-right: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 70px;
      color: #ffffcc;
    }
    .notice-tip{
      float: left;
      margin-right: 10px;
      a{
        color: #fff;
        i {
          margin-right: 5px;
        }
        &:hover{
          opacity: 0.5;
        }
      }
    }
    .logout-btn{
      float: left;
      margin-right: 10px;
      padding: 0 10px;
      color: #fff;
      font-weight: 500;
      cursor: pointer;
      &:hover{
        opacity: 0.5;
      }
    }
    .el-dropdown{
      line-height: 40px;
      .el-dropdown-link{
        color: #fff;
      }
      &:hover{
        opacity: 0.5;
      }
    }
  }
  .footer{
    border-top: solid 1px #e6e6e6;
    text-align: center;
    ul{
      display: inline-block;
      li{
        color: #ccc;
        margin: 50px 0 20px;
        padding: 0 12px;
        font-size: 12px;
        float: left;
        position: relative;
        &:after{
          content: '|';
          position: absolute;
          right: -1px;
        }
        &:last-child{
          &:after{
            display: none;
          }
        }
      }
    }
  }
</style>
